<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>javascript中事件及定位浏览器的差异</title>
		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		#oDiv {
			height: 200px;
			width: 200px;
			background: Red;
			position: absolute;
			left: 200px;
			top: 200px;
			margin: 5px;
			border: 5px solid #f60;
		}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById("oDiv");
				if (document.all) {
					alert("Div元素的客户端高度和宽度:clientWidth|" + oDiv.clientWidth + ",clientHeight|" + oDiv.clientHeight);//内容区域，不包含边框 
					alert("Div元素的客户端高度和宽度:offsetWidth|" + oDiv.offsetWidth + ",offsetHeight|" + oDiv.offsetHeight);//加上边框 
					alert("Div元素的距离左侧和右侧的距离:offsetLeft|" + oDiv.offsetLeft + ",offsetTop|" + oDiv.offsetTop);//应该是应IE的定位问题而有的，IE有2px的差距
				}
				oDiv.onclick = function(e) {
					e = e || window.event;
					if (document.all) {
						//IE浏览器     alert("触发事件的对象:"+e.srcElement.id);//这里你可以看成是相对于浏览器的可视区域
						//注意：IE的client是相对于浏览器的可视区域（不会加上滚动条的左和上）（而FF的pageX|Y可以看成是相对于body的，含滚动条）（兼容处理要考虑的）
						alert("事件发生时光标相对客户端区域的位置:clientX|" + e.clientX + ",clientY|" + e.clientY);
		
						//这里只是单单相对于该元素的哦，如，该DIV是200长宽，所以我在正中点是 100和100左右
						//另外一点要注意，IE的 offset是相对于内容区域的（不包括边框），所以如果有边框的话，则可能为负数(如在边框上点击)（兼容处理要考虑的） 
						alert("光标相对于引起事件对象的位置：offsetX|" + e.offsetX + ",offsetY|" + e.offsetY);
						alert("光标相对屏幕的位置:screenX|" + e.screenX + ",screenY|" + e.screenY);
		
						//取消浏览器的默认行为 
						e.returnValue = false;
						//取消冒泡
						e.cancelBubble;
					} else //标准（主要是FireFox)
					{
						alert("触发事件的对象:" + e.target.id);//这里你可以看成是相对于body（即使有滚动条且已经滚动，它的值不变）
						alert("事件发生时光标相对body区域的位置:pageX|" + e.pageX + ",pageY|" + e.pageY);
		
						//这里只是单单相对于青元素的哦，如，该DIV是200长宽的，所以我在正中点是 100和100左右
						//FF的layer是相对于元素的左上角（不包含margin，包含border的值） (还有点要注意要是有定位的元素，即设置了position，否则就相对于body)
						alert("光标相对于引起事件对象的位置：layerX|" + e.layerX + ",layerY|" + e.layerY);
						alert("光标相对屏幕的位置:screenX|" + e.screenX + ",screenY|" + e.screenY);
		
						//取消浏览器的默认行为
						e.preventDefalut();
						//取消冒泡 
						e.stopPropgation();
					}
				}
			}
		</script>
	</head>
	<body style="height: 1000px">
		<div id="oDiv"></div>
	</body>
</html>
